.mui-switch {
				width: 49px;
				height: 28px;
				position: relative;
				border: 1px solid #dfdfdf;
				background-color: #fdfdfd;
				box-shadow: #dfdfdf 0 0 0 0 inset;
				border-radius: 20px;
				border-top-left-radius: 20px;
				border-top-right-radius: 20px;
				border-bottom-left-radius: 20px;
				border-bottom-right-radius: 20px;
				background-clip: content-box;
				display: inline-block;
				-webkit-appearance: none;
				user-select: none;
				outline: none;
			}
			
			.mui-switch:before {
				content: '';
				width: 26px;
				height: 24px;
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				margin:auto;
				border-radius: 20px;
				border-top-left-radius: 20px;
				border-top-right-radius: 20px;
				border-bottom-left-radius: 20px;
				border-bottom-right-radius: 20px;
				background-color: #fff;
				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
			}
			
			.mui-switch:checked {
				border-color:#4cd765;
				box-shadow: #4cd765 0 0 0 16px inset;
				background-color: #4cd765;
			}
			
			.mui-switch:checked:before {
				left: 21px;
				top: 0;
				bottom: 0;
				margin:auto;
			}
			
			.mui-switch.mui-switch-animbg {
				transition: background-color ease 0.4s;
			}
			
			.mui-switch.mui-switch-animbg:before {
				transition: left 0.3s;
			}
			
			.mui-switch.mui-switch-animbg:checked {
				box-shadow: #dfdfdf 0 0 0 0 inset;
				background-color: #4cd765;
				transition: border-color 0.4s, background-color ease 0.4s;
			}
			
			.mui-switch.mui-switch-animbg:checked:before {
				transition: left 0.3s;
			}
			
		
			
			@mixin borderRadius($radius:20px) {
				border-radius: $radius;
				border-top-left-radius: $radius;
				border-top-right-radius: $radius;
				border-bottom-left-radius: $radius;
				border-bottom-right-radius: $radius;
			}
			
			$duration: .4s;
			$checkedColor: #64bd63;
			.mui-switch {
				width: 52px;
				height: 31px;
				position: relative;
				border: 1px solid #dfdfdf;
				background-color: #fdfdfd;
				box-shadow: #dfdfdf 0 0 0 0 inset;
				@include borderRadius();
				background-clip: content-box;
				display: inline-block;
				-webkit-appearance: none;
				user-select: none;
				outline: none;
				&:before {
					content: '';
					width: 29px;
					height: 29px;
					position: absolute;
					top: 0px;
					left: 0;
					@include borderRadius();
					background-color: #fff;
					box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
				}
				&:checked {
					border-color: $checkedColor;
					box-shadow: $checkedColor 0 0 0 16px inset;
					background-color: $checkedColor;
					&:before {
						left: 21px;
					}
				}
				&.mui-switch-animbg {
					transition: background-color ease $duration;
					&:before {
						transition: left 0.3s;
					}
					&:checked {
						box-shadow: #dfdfdf 0 0 0 0 inset;
						background-color: $checkedColor;
						transition: border-color $duration, background-color ease $duration;
						&:before {
							transition: left 0.3s;
						}
					}
				}
			}